<template>
  <div>
    <div>
      <div style="background:#fff;">
        <div class='content-list'>
          <div class='list-image-box'>
            <image class="list-image"
             :src="fighting_group.picture_url"
              ></image>
          </div>
          <div class='issue-name'>
            <div style="height:30px;color:#444444;font-size:15px;font-weight:bold;">{{fighting_group.title}}</div>
            <div style='height:30px;color:#aaaaaa;font-size:13px;'>
              {{fighting_group.people_num}}人团
            </div>
            <div style="height:30px;">
              <span style="font-size:16px;color:#ec7676;">￥{{fighting_group.price/100}}</span>
              <span style="text-decoration:line-through;font-size:12px;color:#aaaaaa;">￥{{fighting_group.original_price/100}}</span>
            </div>
          </div>
        </div>
      </div>
      <div style="background:#fff;margin-top:10px;padding-bottom:20px;margin-bottom:10px;">
        <div v-if="!isFinished">
          <div class="remain-time">剩余{{clock}}</div>
          <div class="group-num">已开团，再邀<span style="color:#FA504C;">{{needPeopleNum}}</span>人即可成功</div>
        </div>
        <div v-else class="group-num" style="padding-top:20px;">拼团已结束</div>
        <div v-if="fighting_group.people_num<5" style="padding:10px;text-align:center;">
          <image style="margin:0 5px 0 5px" v-for="(item,index) in fighting_group.orders" :key="index" class="profile" :src="item.avatar_url"></image>
          <image style="margin:0 5px 0 5px" v-for="(item,index) in needPeopleNum" :key="index" class="profile" src="/static/assets/not_group_head.png"></image>
        </div>
        <div v-else style="padding:10px;">
          <image style="margin:0 5px 0 5px" v-for="(item,index) in fighting_group.orders" :key="index" class="profile" :src="item.avatar_url"></image>
          <image style="margin:0 5px 0 5px" v-for="(item,index) in needPeopleNum" :key="index" class="profile" src="/static/assets/not_group_head.png"></image>
        </div>
        
        <div v-if="!isFinished">
          <button v-if="already_group" class="btn" open-type="share">邀请好友</button>
          <button v-else class="btn" @click="handleJionGroup()">一键拼团</button>
        </div>
        <button class="btn" v-else>拼团已结束</button>
      </div>
      <van-cell-group>
        <van-cell title="我的拼团" is-link url="/pages/activity/group/my_group" /></van-cell>
        <van-cell title="更多拼团" is-link link-type="switchTab" url="/pages/activity/index" /></van-cell>
      </van-cell-group>
      <div style="height:10px;"></div>
      <van-cell-group>
        <van-cell title="拼团规则" is-link @click="showModalStatus = !showModalStatus" /></van-cell>
      </van-cell-group>
    </div>
    <!--弹框-->
    <div class="drawer_screen" v-if="showModalStatus"></div>
    <div class="drawer_box_ad" v-if="showModalStatus">
      <div class="drawer_title">
        拼团规则
        <image @click="showModalStatus = !showModalStatus" src="/static/assets/close.png" class="close-img"></image>
      </div>
      <div class="drawer_item">1.点击“去拼团”参加拼团活动。</div>
      <div class="drawer_item">2.分享至微信群或发送给微信好友，邀请好友参团。</div>
      <div class="drawer_item">3.达到该拼团要求的成团人数，则拼团成功，点击“立即查看”可领取相应奖励。</div>
      <div class="drawer_item" style="padding-bottom:20px;">4.有效时间内未达到要求人数，则拼团失败。</div>
    </div>
    <div class="home" @click="handleHome()">活动</div>
  </div>
</template>

<script>
function date_format(micro_second) {
  var second = Math.floor(micro_second / 1000)
  var hr = fill_zero_prefix(Math.floor(second / 3600))
  var min = fill_zero_prefix(Math.floor((second - hr * 3600) / 60))
  var sec = fill_zero_prefix((second - hr * 3600 - min * 60))
  //var micro_sec = Math.floor((micro_second % 1000) / 100)
  return hr + ":" + min + ":" + sec
}

function fill_zero_prefix(num) {
  return num < 10 ? "0" + num : num
}

import api from '@/utils/api'
import { mapState, mapActions ,mapGetters } from 'vuex'
export default {
  data () {
    return {
      showModalStatus:false,
      fight_group_id:0,
      total_micro_second: 0,
      clock: '',
      is_set: false,
      photo: 'http://img2.imgtn.bdimg.com/it/u=2375253455,3320141287&fm=27&gp=0.jpg',
    }
  },
  computed: {
    ...mapGetters([
      'fighting_group',
      'user',
      //'my_order',
      'end_time_second',
      'already_group'
    ]),
    needPeopleNum() {
      if (!this.fighting_group || !this.fighting_group.orders) return 0
      return this.fighting_group.people_num - this.fighting_group.orders.length
    },
    isFinished() {
      if (this.end_time_second <= 0) {
        return true
      }
      if (this.fighting_group.people_num === this.fighting_group.orders.length) {
        //this.is_set = true
        this.total_micro_second = 0
        return true
      }
      return false
    } 
  },
  methods: {
    ...mapActions([
      'getFightGroup',
      'getMyOrderInfo'
    ]),
    handleHome(){
      wx.switchTab({url: '/pages/activity/index'})
    },
    handleJionGroup(){
      wx.navigateTo({url: '/pages/activity/group/join_group_pay?fight_group_id=' + this.fighting_group.id})
    },
    countDown() {
      if (this.total_micro_second === 0 && this.end_time_second > 0) {
        this.total_micro_second = this.end_time_second
      }
      if (this.total_micro_second > 0) {
        if (this.total_micro_second > 1000) {
          this.total_micro_second -= 1000
          this.clock = date_format(this.total_micro_second)
        } else {
          this.clock = "00:00:00"
          this.end_time_second = 0
          console.log('11111111111')
          return
        }
      }
      if (this.end_time_second < 0) {
        this.clock = "00:00:00"
        return
      }
      let that = this
      that.$options.interval = setTimeout(function(){
         // 放在最后--
         that.countDown()
      },1000)
    }
  },
  onShareAppMessage: function(options) {
    let data = {
        title: this.fighting_group.title,
        imageUrl: this.fighting_group.picture_url,
        desc: '数量有限，点击立即参团！',
        path: '/pages/activity/group/group_detail?fight_group_id='+this.fight_group_id
    }
    console.log('data: ', data)

    return data
  },
  onLoad (options) {
    clearTimeout(this.$options.interval)
    this.fight_group_id = options.fight_group_id
    this.getFightGroup({id: this.fight_group_id})
    this.is_set = false
    this.total_micro_second = 0
    this.countDown()
  },
  onUnload(){
    clearTimeout(this.$options.interval)
  }
}
</script>

<style>
page{
  background: #F2F2F2;
}
.content-list{
  margin-left: 15px;
  margin-right: 15px;
  height: 110px;
  display:flex;
  border-top: 1px solid #F2F2F2;
}
.list-image-box{
  width:100px;
  height:110px;
  vertical-align: middle;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.list-image{
  width:90px;
  height: 90px;
  vertical-align: middle;
  margin-top: 10px;
}
.issue-name{
  width:220px;
  margin-top:10px;
  margin-left: 20px;
  margin-bottom: 10px;
}
.remain-time{
  text-align: center;
  padding-top: 20px;
  padding-bottom: 10px;
  font-size: 17px;
}
.group-num{
  text-align: center;
  font-size: 19px;
  font-weight: bold;
  padding-bottom: 10px;
}
.profile{
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.btn{
  height: 40px;
  line-height: 40px;
  width:90%;
  color: white;
  font-size: 15px;
  text-align: center;
  background: #feb3ba;
  border-radius: 20px;
  margin: 0px auto;
}
.drawer_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
}
.drawer_box_ad {
  margin-left: 6%;
  width: 88%;
  position: fixed;
  top: 30%;
  z-index: 1001;
  background: #FFF;
  border-radius: 10px;
}
.drawer_title{
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  border-bottom: 1px solid #F9F9F9;
}
.close-img{
  float: right;
  width: 34px;
  height: 34px;
  padding-top: 3px;
  padding-right: 10px;
}
.drawer_item{
  padding: 15px 15px 0 15px;
  font-size: 16px;
}
.home{
  position: fixed;
  bottom: 50px;
  right: 0px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  width: 60px;
  background: #FA5B58;
  text-align: center;
  color: #fff;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
</style>
